/*
 * @description: 商品列表
 * @Author: along
 * @Date: 2020-04-06
 * @Last Modified by: along
 * @Last Modified time: --
 */
<template>
    <div class="container goodList">
        <!-- header -->
        <div class="header">
            <p class="header_title">商品列表</p>
            <p class="header_config" @click="configHeader()">
                <i class="iconfont icon-shezhi"></i>配置表头
            </p>
        </div>

        <!-- filter -->
        <div class="search">
            <div class="search_left">
                <div class="search_item border">
                    <el-dropdown @command="handleCommand">
                        <span class="el-dropdown-link">
                            {{ command_name }}
                            <i class="iconfont icon-zhedie1" :style="{marginLeft: '25px'}"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="商品名称">商品名称</el-dropdown-item>
                            <el-dropdown-item command="商品编号">商品编号</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <p class="search_lines"></p>
                    <el-input
                        v-if="command_name == '商品名称'"
                        v-model="formData.keyword"
                        placeholder="请输入商品名称"
                        size="medium"
                        clearable
                        suffix-icon="el-icon-search"
                        @change="getTableData(1)"
                        @keyup.native.enter="getTableData(1)"
                        class="search_input"
                    />
                    <el-input
                        v-if="command_name == '商品编号'"
                        v-model="formData.goods_no"
                        placeholder="请输入商品编号"
                        size="medium"
                        clearable
                        suffix-icon="el-icon-search"
                        @change="getTableData(1)"
                        @keyup.native.enter="getTableData(1)"
                        class="search_input"
                    />
                </div>
                <div class="search_item">
                    <p class="search_item_title">商品分类</p>
                    <el-cascader
                        v-model="formData.goods_type"
                        :options="goodsTypesList"
                        :props="{
                            value: 'no',
                            label: 'title',
                            children: 'children'
                        }"
                        expand-trigger="click"
                        clearable
                        :filterable="true"
                        class="input-unit-value"
                        size="small"
                        @change="getTableData(1)"
                        change-on-select
                        placeholder="不限"
                        separator="-"
                    />
                </div>
            </div>
            <div class="search_right">
                <div class="search_item right0">
                    <el-button
                        size="medium"
                        type="primary"
                        :style="{width: '150px'}"
                    >
                        添加商品
                    </el-button>
                </div>
            </div>
        </div>

        <!-- table -->
        <el-table
            v-if="tableData.length"
            :data="tableData"
            height="100%"
            class="common-table"
            style="width: calc(100% - 64px);margin-left: 32px;margin-right:32px"
            v-loading="loading"
            ref="tableDataList"
        >
            <el-table-column
                prop=""
                label="表头"
                show-overflow-tooltip
                :formatter="emptyFormatter"
                header-align="left"
            />
            <el-table-column
                prop="date"
                label="操作"
                fixed="right"
                :width="125"
            >
                <template slot-scope="">
                    <div class="el-data-style">
                        <el-button
                            type="text"
                            class="btn-nopadding"
                        >
                            编辑
                        </el-button>
                        <el-button
                            type="text"
                            class="btn-nopadding"
                        >
                            删除
                        </el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>

        <!-- 无数据展示 -->
        <img
            v-if="!tableData.length"
            src="http://cdn.zsdx.cn/wei/images/hire/manage/market/empty-good-list.png"
            class="page_images"
            :style="{width: '500px', marginLeft: '50%', marginTop: '120px', transform: 'translate(-50%,0%)'}"
        >
        <!-- 图片预览 -->
        <img-preview ref="preview" />
    </div>
</template>

<script>
import { mapState } from 'vuex';
import imgPreview from '@/components/common/img-preview';

export default {
    components: {
        imgPreview
    },
    mixins: [],
    data() {
        return {
            command_name: '商品名称',//默认展示名称
            formData: {
                keyword: '',
                goods_no: '',
                goods_type: ''
            },
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            tableData: [],
            loading: false
        };
    },
    filters: {
    },
    computed: {
    },
    watch: {
        ...mapState({

        })
    },
    mounted() {
        this.init();
    },
    methods: {
        /**
         * @description 初始化页面
         */
        init () {
            this.$store.commit('header/SET_HEADER',[{ title: '校园商城' }, { title: '商品列表' }]);
            this.getTableData();
            this.getGoodsTypeList();
        },

        /**
         * 获取表格数据
         */
        getTableData (page) {
            this.$post('', {
                page_id: page || this.page.now_page,
                goods_no: this.formData.goods_no,
                keyword: this.formData.keyword,
                type_no: (this.formData.goods_type && this.formData.goods_type.length >= 1) ? this.formData.goods_type[0] : '',
                sub_type_no: (this.formData.goods_type && this.formData.goods_type.length >= 2) ? this.formData.goods_type[1] : ''
            }, resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;

                    setTimeout(() => {
                        this.$refs.tableDataList.doLayout();
                    },0);
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 获取商品分类数据
         */
        getGoodsTypeList () {
            this.$post('', {
                //
            }, resp => {
                if (resp.code == 1) {
                    this.goodsTypesList = resp.data.list;
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 切换搜索内容
         */
        handleCommand (event) {
            try {
                if(!event) return false;
                this.command_name = event;
            } catch (error) {
                console.log('error:' + error);
            }
        },

        /**
         * @description 删除商品
         */
        fnDelete(no) {
            this.$confirm('确认删除该商品?', '提示', {
                confirmButtonText: '删除',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$post('', { goods_no: no }, resp => {
                    if (resp.code == 1) {
                        this.$notify({
                            title: '提示',
                            message: '操作成功',
                            duration: 2000,
                            type: 'success'
                        });
                        this.fnGetData();
                    } else {
                        this.$notify({
                            title: '警告',
                            message: resp.msg,
                            duration: 2000,
                            type: 'warning'
                        });
                    }
                });
            });
        },

        /**
         * @description: 预览图片
         */
        fnPrievimage (images, index) {
            if(images && Object.prototype.toString.call(images) == '[object String]') {
                this.$refs.preview.show([
                    images
                ]);
            } else if (images && Object.prototype.toString.call(images) == '[object Array]') {
                this.$refs.preview.show(images, index);
            } else {
                this.$notify({
                    title: '提示',
                    message: '图片类型错误',
                    type: 'warning',
                    duration: 2000
                });
            }
        },

        /**
         * @description 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        }
    },
};
</script>

<style lang="less">
.container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #ffffff;
    box-sizing: border-box;
    .header {
        width: 100%;
        height: 58px;
        box-sizing: border-box;
        border-bottom: 1px rgba(235, 238, 245, 1) solid;
        padding: 0 32px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .header_title {
            color: rgba(51, 51, 51, 1);
            font-size: 18px;
            font-weight: 500;
        }
        .header_config {
            display: flex;
            align-items: center;
            color: rgba(32, 160, 255, 1);
            font-size: 14px;
            cursor: pointer;
            .icon-shezhi {
                color: rgba(32, 160, 255, 1);
                font-size: 14px;
                margin-right: 5px;
            }
        }
    }
    .search {
        width: calc(100% - 64px);
        display: flex;
        flex-wrap: wrap;
        margin: 0 32px;
        margin-bottom: 24px;
        justify-content: space-between;
        .search_left, .search_right {
            display: flex;
            align-items: center;
        }
        .search_item {
            margin-top: 24px;
            height: 36px;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            border-radius: 4px;
            padding-left: 23px;
            cursor: pointer;
            margin-right: 9px;
            .search_lines {
                width: 1px;
                height: 14px;
                background-color: rgba(153, 153, 153, 1);
                margin: 0 16px 0 13px;
            }
            .search_item_title {
                color: rgba(51, 51, 51, 1);
                font-size: 14px;
                margin-right: 10px;
            }
        }
        .border {
            border: 1px rgba(194, 194, 194, 1) solid;
        }
        .right0 {
            margin-right: 0px;
        }
    }
}
</style>

<style lang="less">
.goodList {
    .el-dropdown {
        white-space: nowrap;
    }
    .search_input {
        .el-input__inner {
            width: 260px;
            border: none;
            height: 34px;
        }
    }
    .__el_dialog {
        .el-checkbox {
            margin-top: 24px;
        }
        .el-checkbox-group {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            .el-checkbox {
                margin-top: 24px;
                margin-right: 0px;
                width: calc(100% / 3);
            }
        }
    }
    .el-dialog__body {
        padding-left: 58px;
        padding-right: 58px;
    }

    .el-dialog__header {
        padding-top: 10px;
        box-shadow:0px 1px 0px 0px rgba(233,233,233,1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;
        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }
        .el-icon-close:before {
            color: rgb(194,194,194);
            font-size: 17px;
            font-weight: bold;
        }
        .el-dialog__headerbtn {
            top: 14px;
        }
    }
}
.cursor-font {
    color: #409EFF;
    cursor: pointer;
}
</style>